import QtQuick 2.0
import QtQuick.Controls 2.3
import Quick.UIComponent.Page.Title  0.1
import  Quick.UIComponent.Page.BackGround  0.1
import QtQuick.Layouts 1.3
import  Quick.AnimationComponent.ZxxCustom  0.1
import Quick.SystemComponent.Theme 0.1
import  Quick.UIComponent.ViewComponet.ListView.Section  0.1
import  Quick.UIComponent.ViewComponet.ListView.HighLightBar  0.1 as HighLight



Page {
    id:root
    property string childPath:Qt.resolvedUrl("childPage")

    property alias  model: control.model
    title: (stack.depth > 0)?("ZxxQML_UI  ---" + stack.currentItem.title):("ZxxQML_UI")

    header:Title{
        title:root.title
        height: 60
        rightText:"\u269B"
        leftText :"\u002d"
        rightTip:qsTr("选择主题")
        leftTip:qsTr("最小化")
        onRightClicked:{
            openStyleDialog()
        }
        onLeftClicked: {
            ApplicationWindow.window.hide()
        }
    }

    background:BackGround{

    }


    footer: Item{

    }

    RowLayout{
        anchors.fill: parent
        Rectangle{
            Layout.preferredWidth:  180
            Layout.fillHeight: true
            color: Theme.controlColor
            ListView{
                id:control
                anchors.fill: parent
                section.property: "_property"
                section.criteria: ViewSection.FullString
                section.delegate: sectionCom.sectionHeader
                highlight: highlightBar

                delegate: ItemDelegate{
                    leftPadding: 40
                    text: _name
                    font.pixelSize: 20
                    width: parent.width-2
                    height: 50
                    onClicked: {
                        ListView.view.currentIndex = index
                        intoChild(childPath + "/" + _source)
                    }
                }
                ScrollBar.vertical: ScrollBar {
                    id: scrollBar
                }

            }
        }



        StackView{
            id:stack
            Layout.fillHeight: true
            Layout.fillWidth:  true
            replaceEnter:animate._in
            replaceExit:animate._out
            initialItem: "childPage/Controls/Page_Button.qml"
        }
    }

    Component{
        id:highlightBar
        HighLight.HighLightBar{

        }
    }

    ScaleInOut{
        id:animate
        target:stack
    }
    SectionHeader{
        id:sectionCom
    }


    function intoChild(source){
        stack.replace(stack.currentItem,source)
    }



}
